<!DOCTYPE html>
<html>
    <head>
        <title>manipulation of elements</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var holder = {
                    getOriginalMap : function () {
                        return this.originalMap;
                    },

                    originalMap : {
                        letterSpacing: $("#txtt").css("letter-spacing"),
                        fontSize : $("#txtt").css("font-size")
                    }

                }

                function CollectionHolder(collection) {
                    this.collection = collection;
                    this.getStoredtCollection = getStoredtCollection;
                    function getStoredtCollection() {
                        return this.collection;
                    };
                }

                $("#scaleUpText").click(function() {
                    var map = {
                        letterSpacing: "40px",
                        fontSize : "40px"

                    }

                    if(map.letterSpacing != $("#txtt").css("letter-spacing")) {
                        $("#txtt").animate(map, 3000)
                    } else {
                        $("#txtt").animate(holder.getOriginalMap(), 3000)

                    }
                });
                $("#opacityToZero").click(function() {
                    $(this).attr('disabled', 'disabled');
                    var map = {
                        letterSpacing: "40px",
                        fontSize : "55px",
                        opacity : "0"

                    }

                    $("#txt").animate(map, 3000, function() {
                        $("#txt").css("opacity", 1);
                        $("#txt").animate({fontSize : "12px", letterSpacing: "4px"}, 12343);
                    })
                });

                $("#moveDivWithHeaders").click(function(){
                    $(this).attr("disabled", "disabled");

                    var fancyHolder = new CollectionHolder({
                        letterSpacing: $("#divWithHeaders").css("letter-spacing"),
                        fontSize : $("#divWithHeaders").css("font-size"),
                        opacity : $("#divWithHeaders").css("opacity"),
                        top : $("#divWithHeaders").css("top"),
                        left:$("#divWithHeaders").css("left"),
                        padding:$("#divWithHeaders").css("padding"),
                        width : $("#divWithHeaders").css("width")
                    });

                    var paramsMap = {
                        letterSpacing: "10px",
                        fontSize : "47px",
                        opacity : "0.33",
                        top : "-=260px",
                        left: "+=680px",
                        padding: "10px",
                        width : "+=297px"

                    }

                    $("#divWithHeaders").animate(paramsMap, 5500, function() {
                        $(this).fadeOut(3000, function() {
                            $(this).css(fancyHolder.getStoredtCollection());
                            $(this).fadeIn(1999, function(){
                                $("#moveDivWithHeaders").removeAttr("disabled");

                            });
                        });
                    })
                });

            })
        </script>
    </head>
    <body>
        <h4>
            <a href="index.html">Index</a>
        </h4>

        <input id="scaleUpText" type="button" value="scale Up text below" />

        <p id="txtt">Lorem ipsum dolor</p>

        <input id="opacityToZero" type="button" value="Opacity to zero" />

        <p id="txt">Lorem ipsum dolor</p>

        <input id="moveDivWithHeaders" type="button" value="Move div below" />

        <div id="divWithHeaders" style="width: 250px; text-align: center; position: relative">
            <h2 style="padding-bottom: 0px; margin-bottom: 0px">This is some header</h2>
            <h3 style="padding-top: 0px; margin-top: 0px">And this is some text</h3>
        </div>
    </body>
</html>
